import React, { useState } from 'react'
import Head from 'next/head'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import { Col, Row, List, Icon } from 'antd'
import '../static/style/pages/index.css'

const Home = () => {

  const [myList, setMyList] = useState([
    { title: 'Tendo yyds', context: '夫唐、虞之世，結繩而足治，屈指而足算。是時豈料百代之後，計算機械之巧，精於公輸之木鳶，善於武侯之流馬；程式語言之多，繁若《天官》之星宿，奇勝《山經》之走獸。' },
    { title: '吾有一言。曰「「Hello world!」」。書之。', context: '鼠、蟹、鑽、魚，或以速稱。蛇、象、駱、犀，各爭文采。方知鬼之所以夜哭，天之所以雨粟。然以文言編程者 ，似所未有。此非文脈之所以傳，文心之所以保。' },
    { title: '吾有一數。曰六。名之曰「甲」。', context: '嗟予小子，遂有斯志。然則數寸之烏絲猶覆於頭，萬卷之素書未破於手；一身長羁于远邦，兩耳久旷于雅言。然夫文章者吾之所宿好，程式者偶承時人之謬譽。故希孟不慚年少，莊生不望無涯。' },
    { title: '若三不大於五者。吾有一言。曰「「OK」」。', context: '乃作斯言。未能嘔瀝長吉之心血，亦庶幾免於義山之流沫。既成之後，復學干將鑄劍而自飼，越王嚐糞而當先。自謂偶追《十書》之筆意，但恨少八家之淋漓。此子山所謂士衡抚掌而甘心，平子見陋而固宜。然則雖實覆甕之質，尚存斧正之望；雖乏呂相之金，易字之渴蓋同。此亦開源之大義，吾輩之所以勉勵也。一笑。' }
  ])

  return (
    <div>
      <Head>
        <title>Home</title>
      </Head>
      <Header />

      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <List
            header={<div>最新日志</div>}
            itemLayout="vertical"
            dataSource={myList}
            renderItem={item => (
              <List.Item>
                <div className="list-title">{item.title}</div>
                <div className="list-icon">
                  <span><Icon type="calendar" /> 2021-11-01</span>
                  <span><Icon type="folder" /> myBlog</span>
                  <span><Icon type="like" /> 66666!</span>
                </div>
                <div className="list-context">{item.context}</div>

              </List.Item>
            )}
          />
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author/>
          <Advert/>
        </Col>
      </Row>
    </div>
  )
}

export default Home
